<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        var pn=1; var page;
        $(function () {
            query(pn);
        })
        function query(pn) {
            $.ajax({
                url:"/getStudent",
                data:{"pn":pn},
                success:function (result) {
                     page = eval(result);
                    var str="";
                    $(result.list).each(function () {
                        str+="<tr>"+
                             "<td>"+this.id+"</td>"+
                            "<td>"+this.name+"</td>"+
                            "<td>"+this.gender+"</td>"+
                            "<td>"+this.age+"</td>"+
                            "<td>"+this.telephone+"</td>"+
                            "<td>"+this.email+"</td>"+
                            "<td>"+this.classes.name+"</td>"+
                            "</tr>";
                    })
                    $("#tbody").empty().append(str);
                    $(".pn").html(result.pageNum);
                    $(".totalPage").html(result.pages);
                    $(".totalCount").html(result.total);
                }
            })
        }
        function firstPage() {
            pn=1;
            query(pn);
        }
        function previousPage() {
            if(page.hasPreviousPage){
                pn=page.pageNum-1
                query(pn);
            }
        }
        function nextPage() {
            if(page.hasNextPage){
                pn=page.pageNum+1;
                query(pn);
            }
        }
        function lastPage() {
            pn=page.pages;
            query(pn);
        }
    </script>
</head>
<body>
<h2>学院信息列表</h2>
<table border="1">
    <tr>
        <td colspan="7"><a href="add.html">添加学员</a> </td>
    </tr>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>电话</td>
        <td>email</td>
        <td>班级</td>
    </tr>
    <tbody id="tbody"></tbody>
</table>
<div>
    <a class="firstPage" href="javascript:firstPage()">首页</a> |
    <a class="previousPage" href="javascript:previousPage()">上一页</a> |
    <a class="nextPage" href="javascript:nextPage()">下一页</a> |
    <a class="lastPage" href="javascript:lastPage()">末页</a>
    第<span class="pn"></span>页/共<span class="totalPage"></span>页（<span class="totalCount"></span>条记录）
</div>
</body>
</html>